<template>
	<div v-if="result">
		&nbsp;&nbsp;&nbsp;
		<van-image
			width="45"
			height="45"
			:src="headImage"
		/>
		<van-button class="btn" type="default" @click="cancel" v-if="result.order.orderStatus == 0">取消订单</van-button>
		<van-button class="btn" type="default" disabled v-if="result.order.orderStatus == 1">订单已退款</van-button>
		<van-button class="btn" type="default" disabled v-if="result.order.orderStatus == 2">订单已完成</van-button>
		<van-list>
			<div class="van-hairline--top border"></div>
			<van-panel title="商品信息">
				<div>
					<van-cell
						class="pro"
						v-for="(item, index) in result.order.orderDetails"
						:key="index"
						:title="'\t'+item.productName+'\t\tx'+item.productQuantity+'\t\t￥'+item.productPrice"
					/>
				</div>
			</van-panel>
			<div class="van-hairline--top border"></div>
			<br />
			<div class="van-hairline--top border"></div>
			<van-panel title="配送信息">
				<div>
					<van-cell
						class="pro"
						:title="'\t送达时间\t\t\t\t\t尽快送达'"
					/>
				</div>
			</van-panel>
			<van-panel title="收货人信息">
				<div class="ellipsis">
					<van-cell
						class="pro"
						:title="'\t收货人\t\t\t'+result.order.buyerName"
					/>
					<van-cell
						class="pro"
						:title="'\t手机号\t\t\t'+result.order.buyerPhone"
					/>
					<van-cell
						class="pro "
						:title="'\t地址\t\t\t\t'+result.order.buyerAddress.substring(0,9)+'...'"
					/>
				</div>
			</van-panel>
			<div class="van-hairline--top border"></div>
			<br />
			<div class="van-hairline--top border"></div>
			<van-panel title="订单">
				<div>
					<van-cell
						class="pro"
						:title="'\t订单号\t\t\t'+orderId"
					/>
					<van-cell
						class="pro"
						:title="'\t总金额\t\t\t'+result.order.orderAmount"
					/>
				</div>
			</van-panel>
			<div class="van-hairline--top border"></div>
			<br />
		</van-list>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				orderId: this.$route.query.orderId,
				result:null,
				headImage:null,
				loading:true,
			}
		},
		created() {
			this.getOrder();
		},
		beforeCreate() {
			this.$toast.loading({
				duration: 0,       // 持续展示 toast
				forbidClick: true, // 禁用背景点击
				loadingType: 'circular',
				message: '加载中...'
			});
		},
		methods: {
			cancel() {
				this.$http.post(
					"/api/orderMaster/cancelOrder/"+this.orderId,
				).then(response => {
					if (response.data.flag) {
						this.getOrder();
						this.$toast("退款成功.");
					}
				}).catch(error => {
					
				}).finally(() => {
				});
			},
			getOrder(){
				this.$http.post(
					"/api/orderMaster/getById/"+this.orderId,
				).then(response => {
					this.result = response.data.data;
					this.headImage = this.result.headImage;
					this.$toast.clear();
				}).catch(error => {
					
				}).finally(() => {
				});
			}
		},
	}
</script>

<style scoped="scoped">
	.pro {
		white-space: pre;
		text-align: left;
	}
	.border {
		border-top: solid 1px black !important;
	}
	.btn {
		position: relative;
		top: -15px;
		left: 48%;
	}
</style>
